<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <!-- 使用双向绑定的方式获取查询的参数 -->
          <el-input v-model="filters.keywords" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="logininfoQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="Logininfos" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        
        <el-table-column type="index" width="60">
        </el-table-column>
        

        <el-table-column prop="username" label="username" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="phone" label="phone" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="email" label="email" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="salt" label="salt" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="password" label="password" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="type" label="type" align="center" width="120" sortable>
        </el-table-column>
        <el-table-column prop="disable" label="disable" width="100" align="center" sortable>
        <template slot-scope="scope">
          <span style="color: #00fc00" v-if="scope.row.disable == 1">1</span>
          <span style="color: red" v-else-if="scope.row.disable == 0">0</span>
          <span style="color: gray" v-else>未知</span>
        </template>
        </el-table-column>


        <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>


    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--   disabled: 使按钮失效   -->
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"
           @current-change="handleCurrentChange"
           :page-size="pageSize"
           :total="totals"
           style="float:right;">

      </el-pagination>
    </el-col>

    <!--编辑界面
      rules: 表单验证，用于判断用户是否输入数据
      ref： 点击提交按钮时，再次验证是否输入数据 - 为当前模态框取名

    -->
    <el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">
    
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">



        <el-form-item prop="username" label="username" >
          <el-input v-model="editForm.username" prop="username" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item prop="phone" label="phone" >
          <el-input v-model="editForm.phone" prop="phone" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item prop="email" label="email" >
          <el-input v-model="editForm.email" prop="email" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item prop="salt" label="salt" >
          <el-input v-model="editForm.salt" prop="salt" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item prop="password" label="password" >
          <el-input v-model="editForm.password" prop="password" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item prop="type" label="type" >
          <el-input v-model="editForm.type" prop="type" auto-complete="off"></el-input>
        </el-form-item>

       <el-form-item label="disable" prop="disable">
          <el-radio-group v-model="editForm.disable">
            <el-radio class="radio" :label="1">1</el-radio>
            <el-radio class="radio" :label="0">0</el-radio>
          </el-radio-group>
        </el-form-item>


        </el-form>


        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

  </section>
</template>

<script>

export default {
  data() {
    return {

      Logininfos: [],
      title: "",
      filters: {
        keywords: ''
      },
      totals: 0,
      currentPage: 1,
      pageSize: 5,
      listLoading: false,
      sels: [],//列表选中列

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
      
      username: [ 
        { required: true, message: '请输入username', trigger: 'blur' }
      ],    
      phone: [ 
        { required: true, message: '请输入phone', trigger: 'blur' }
      ],    
      email: [ 
        { required: true, message: '请输入email', trigger: 'blur' }
      ],    
      salt: [ 
        { required: true, message: '请输入salt', trigger: 'blur' }
      ],    
      password: [ 
        { required: true, message: '请输入password', trigger: 'blur' }
      ],    

      },
      //编辑界面数据
      editForm: {
        id: null,
        username: '',
        phone: '',
        email: '',
        salt: '',
        password: '',
        type: null, 
        disable: 1,  
      },

    }
  },
  methods: {

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getLogininfos();
    },


    /**
     * 问题：当在非第一页查询时，如果条件查询的结果没有超过一页数据，则会显示空屏，
     * 解决：条件查询配合分页查询，显示第一页的数据
     */
    logininfoQuery(){
      this.currentPage  = 1;
      this.getLogininfos();
    },

    //获取元素集合
    getLogininfos() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keywords: this.filters.keywords
      };
      this.listLoading = true;

      //发送异步请求获取数据logininfo
      this.$http.put("/logininfo", para)
          .then(res => {
            //alert("success")
            //关闭忙等框
            this.listLoading = false;
            this.totals = res.data.totals;
            this.Logininfos = res.data.data;
          }).catch(res => alert('fail!'));
    },
    
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        //提示框
        type: 'warning'
      }).then(() => {
        //当点击确认时执行

        //忙等框
        this.listLoading = true;
        //获取数据发送请求 
        this.$http.delete('/logininfo/'+ row.id)
            .then(res => {
                //关闭忙等框
                if(res.data.success){
                  //成功删除
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                }else{
                  //删除失败
                  this.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }

              //操作完成后，刷新页面
              //当删除完当前页面的最后一条数据后，可以就显示空页面
              //或者每次删除完就重新显示第一页数据
              // this.currentPage = 1;
              this.getLogininfos();

            }).catch(res => {
              //发生异常或错误时执行
              this.$message({
                message: '系统异常，稍后重试',
                type: 'error'
          });

        });

      }).catch(() => {
        //点击取消时执行
      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.title = '编辑';
      
      this.editFormVisible = true;

      //通过克隆方式获取回显数据
      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function () {
      //修改标题
      this.title = '增加';

      //清空模态框
      this.editForm = {
        id: null,
        username: '',
        phone: '',
        email: '',
        salt: '',
        password: '',
        type: null, 
        disable: 1,  
      },

      this.editFormVisible = true;

    },
    
    //编辑页面的提交按钮的事件绑定函数
    editSubmit: function () {

            this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;

            //通过克隆获取一份数据因为使用的是双向绑定
            let para = Object.assign({}, this.editForm);

            //发送请求
            this.$http.post("/logininfo", para)
              .then(res => {
                //关闭忙等框
                this.editLoading = false;


                if(res.data.success) {
                  //操作成功

                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });


                }else {
                  //操作失败

                  this.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }

                //关闭模态框
                this.editFormVisible = false;

                //刷新页面
                this.getLogininfos();

              }).catch(res => {
                //发生异常

                //关闭忙等框
                this.editLoading = false;
                this.$message({
                  message: '网络延时，请稍后重试',
                  type: 'error'
                });


                //关闭模态框
                this.editFormVisible = false;

                //刷新页面
                this.getLogininfos();
            })

          });
        }
      });
    },
    
    
    selsChange: function (sels) {
      //复选框选择时将选择的数据记录到data数据模型中的sels中
      this.sels = sels;
      console.log(sels);
    },


    //批量删除
    batchRemove: function () {

      //map 数组的方法映射
      var ids = this.sels.map(item => item.id);


      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;

        //发送请求
        this.$http.patch("/logininfo", ids).then((res) => {
          this.listLoading = false;

          if(res.data.success) {
            //success
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }

          //操作成功后刷新页面 可以继续查询当前页的内容,即使当前页的数据被删除完
          this.getLogininfos();

        }).catch(res =>{
          //当产生异常时
          this.listLoading = false;
          this.$message({
            message: '网络延迟，请稍后重试！',
            type: 'error'
          });
        });
      }).catch(() => {
        //点击取消按钮
      });
    }
  },
  mounted() {
    this.getLogininfos();
  }
}

</script>

<style scoped>

</style>

